<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学习flex</title>
	<style>
		body {
			font: 10pt Arial, sans-serif;
			color: #555;
		}
		/*.flexboxlayout {
            display: flex;
            display:-webkit-flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            height: 400px;
            background: #ddd;
        }

        .flexboxlayout > .item {
            width: 50px;
            height: 50px;
            background: orange;
            margin: 5px;
        }
        */

        /*.flexboxlayout {
        	display: flex;

        	width: 500px;
        	height: 500px;
        	background: #ddd;
        	padding: 10px;
        }

        .sidebar {
        	flex: 1 0 0;
        	background: orange;
        }

        .content {
        	flex:2 0 0;
        	background: #dd4814;
        }*/
        
        .flexboxlayout {
        	display: flex;

        	align-items: center;
        	justify-content: center;

        	/*以下定义折行*/
        	flex-wrap: wrap;  
			
        	flex-flow: column wrap;/*缺省默认是row wrap*/
        	-webkit-flex-flow: column wrap;
	
			/* 下面我们可以调整子元素的对齐方式，使用align-content属性*/
			/* 合法的值可以是：flex-start, flex-end, space-between, space-around, stretch*/

			align-content: stretch;
			-web-flex-wrap: stretch;
			
        	background: #ddd;
        	height: 300px;
        	width: 500px;
        }

        .flexboxlayout > .item {
			width: 50px;
			height: 50px;
			background: orange;
			margin: 5px;
        }
        
	</style>
</head>
<body>

	<!-- <div class="flexboxlayout">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div> -->
	<!-- <div class="flexboxlayout">
		<div class="content"></div>
		<div class="sidebar"></div>
	</div> -->
	<div class="flexboxlayout">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>
</body>
</html>